{% extends "base.html" %}
{% load staticfiles %}
{% load analysis_tags %}
{% block content %}

<script type='text/javascript'>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    });
</script>
    
    <div class="flex-nav">
        {% include "analysis/pages/nav-sidebar.html" %}
        <section class="flex-nav__body cuckoo-analysis" tabindex="0">

            <header class="page-header cuckoo-analysis__header">
                <h1>Compare</h1>
            </header>

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6" style="border-right: 1px dashed #878787;">
                        
                        <h2 style="text-align: center;">Analysis 1</h2>
                        <hr>
                        {% include "analysis/pages/compare/_info.html" with record=left %}

                        <div class="col-md-8">
                            <h4>Execution Graph</h4>

                            <p>This graph gives you an abstracted overview of the execution of the analyzer file. More specifically it represents the percentage of occurrences of behavioral events classified by category: the bigger the colored block, the higher is the count of events for the respective category performed by the analyzed malware</p>
                            <p>Comparing two graphs from different analyses can give you help estimate how much the behavior of the two files differ.</p>
                            <p>Following are the colored categories:</p>

                            <p style="text-align: center;">
                                <span class="badge registry" style="color:black;">registry</span>
                                <span class="badge file" style="color:black;">file</span>
                                <span class="badge system" style="color:black;">system</span>
                                <span class="badge network" style="color:black;">network</span>
                                <span class="badge process" style="color:black;">process</span>
                                <span class="badge services" style="color:black;">services</span>
                                <span class="badge synchronization" style="color:black;">synchronization</span>
                                <span class="badge windows" style="color:black;">windows</span>
                            </p>
                        </div>

                        <div class="col-md-4">
                            <div style="height: 300px;border: 2px solid #666;">
                                {% for cat, count in left_counts.items %}
                                    <div style="height: {{count}}%" class="{{cat}}" data-toggle="tooltip" data-placement="top" title="{{count}}% {{cat}}"></div>
                                {% endfor %}
                            </div>
                        </div>

                    </div>

                    <div class="col-md-6">
                        
                         <h2 style="text-align: center;">Analysis 2</h2>
                        <hr>
                        {% include "analysis/pages/compare/_info.html" with record=right %}

                        <div class="col-md-4">
                            <div style="height: 300px;border: 2px solid #666;">
                                {% for cat, count in right_counts.items %}
                                    <div style="height: {{count}}%" class="{{cat}}" data-toggle="tooltip" data-placement="top" title="{{count}}% {{cat}}"></div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="col-md-8"></div>

                    </div>

                </div>
            </div>

             <!-- footer replacement to avoid double scrollbars -->
            <footer class="flex-grid__footer spread-alignment">
                <p class="footnote">
                    &copy;2010-2018 <a href="https://www.cuckoosandbox.org" target="_blank">Cuckoo Sandbox</a>
                </p>
                <div class="logo">
                    <img src="{% static "graphic/cuckoo_inverse.png" %}" alt="Cuckoo Malware Analysis Sandbox" />
                    <a href="#">Back to Top</a>
                </div>
            </footer>

        </section>
    </div>

{% endblock %}
